<form action="" id="form-horizontal" class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">活动名称</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="name" placeholder="" datatype="*" value="{$activity.name}">
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">活动类型</label>
    <div class="col-sm-2">
     	<select name="class_id" class="form-control" >{$activity.classOptions}</select>
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">活动照片</label>
    <div class="col-sm-5">
      <input type="text" class="form-control margin-bottom" name="pic" id="pic" placeholder="请输入活动图片，或点击上传" value="{$activity.pic}"> 
      <span class="btn btn-primary" id="upload-image">上传图片</span>
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">活动内容介绍</label>
    <div class="col-sm-5">
      <textarea class="form-control" name="intro" placeholder="" datatype="*" rows="4">{$activity.intro}</textarea>
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">活动时间</label>
    <div class="row">
      <div class="col-sm-4">
        <div class="input-group">
          <span class="input-group-addon">开始</span>
          <input type="text" class="form-control" id="start-time" name="begin_time" placeholder="请选择活动开始时间" value="{$activity.begin_time|date='Y-m-d H:i', ###}">
          <span class="input-group-addon">-</span>
          <input type="text" class="form-control" id="end-time" name="end_time" placeholder="请选择活动结束时间" value="{$activity.end_time|date='Y-m-d H:i', ###}">
          <span class="input-group-addon">结束</span>
        </div>
      </div>
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">每天参与次数</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="day_times" placeholder="用户每天可以参与次数" value="{$activity.day_times}">
    </div>
  </div>
  
  <div class="wmfl-line"></div>
  
  <div class="price-config">
    <h3 class="text-center">奖项设置</h3>
  </div>
  
  <div id="prize-list"></div>
  
  <div class="form-group">
    <a id="add-prize" class="btn btn-info col-sm-offset-2">增加一个奖项</a>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">状态</label>
    <div class="col-sm-5">{$activity.statusRadio}</div>
  </div>
  
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-8">
      <input type="hidden" name="id" value="{$activity.id}">
      <input type="hidden" name="model" value="{$_GET['model']}">
      <button type="submit" class="btn btn-primary" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/savePost">保存更改</button>
    </div>
  </div>
</form>

<!-- datetimepicker -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/datetimepicker/jquery-ui-1.10.0.custom.min.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/datetimepicker/jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/Style/Common/datetimepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="__PUBLIC__/Style/Common/datetimepicker/jquery-ui-timepicker-zh-CN.js"></script>
<script type="text/javascript">
  //时间
  $("#start-time").datetimepicker( { "timeFormat": "hh:mm" } );
  $("#end-time").datetimepicker( { "timeFormat": "hh:mm" } );
</script>

<script type="text/javascript">
  $(function(){
    
    //初始化创建
    var prizeConfigJSON = {$prizeConfigJSON};
    ( prizeConfigJSON.length == 0 ) && ( prizeConfigJSON.push ( {"title": "一等奖", "prizeName": "", "ratio": "", "total": ""} ) );
    var cnIndex = [ "一","二","三","四","五","六","七","八","九","十"];
    createPrize( prizeConfigJSON );
    
    function addCheck() {
        var max = 9;
        if($("select[name='class_id']").val()==2) max = 2;
        if ( prizeConfigJSON.length > max ) {
          alert( "最多设置"+cnIndex[max]+"个奖项" );
          return false;
        }
        return true;
    }
    
    //增加一个奖项
    $("#add-prize").click(function(){
      if ( !addCheck() ) {
      } else {
        prizeConfigJSON.push ( {"title": "", "prizeName": "", "ratio": "", "total": ""} );  
      };
      createPrize( prizeConfigJSON );
    });
    
    //删除一项奖品
    function deleteOnePrize( elem ) {
      prizeConfigJSON.splice( $(elem).attr("data-index"), 1 );
      createPrize( prizeConfigJSON );
    };
    window.deleteOnePrize = deleteOnePrize;
    
    //创建奖项列表
    function createPrize ( configs ) {
      var oPrizeList = $( "#prize-list" );
      var html = '<div class="form-group">'
                +'<label class="col-sm-2 control-label">奖项{{cnIndex}}设置</label>'
                +'<div class="row">'
                +'<div class="col-sm-2"><div class="input-group"><span class="input-group-addon">奖项名称</span><input type="text" class="form-control" data-name="title" name="prize_config[{{index}}][title]" placeholder="" value="{{title}}"></div></div>'
                +'<div class="col-sm-3"><div class="input-group"><span class="input-group-addon">奖品</span><input type="text" class="form-control" data-name="prizeName" name="prize_config[{{index}}][prizeName]" placeholder="" value="{{prizeName}}"></div></div>'
                +'<div class="col-sm-2"><div class="input-group"><span class="input-group-addon">奖品数量</span><input type="text" class="form-control prize-number" data-name="total" name="prize_config[{{index}}][total]" placeholder="" value="{{total}}"></div></div>'
                +'<div class="col-sm-2"><div class="input-group"><span class="input-group-addon">中奖概率</span><input type="text" class="form-control prize-ratio" data-name="ratio" name="prize_config[{{index}}][ratio]" placeholder="" value="{{ratio}}"><span class="input-group-addon">%</span></div></div>'
                +'<a data-index="{{index}}" href="javascript:void(0)" onclick="deleteOnePrize( this )">删除</a>'
                +'</div></div>';
      var res = "";
      for ( var i = 0, len = configs.length; i < len; i ++ ) {
        ( configs[i].title === "" ) && ( configs[i].title = cnIndex[ prizeConfigJSON.length - 1 ] + "等奖" );
        var title = configs[i].title,
            prizeName = configs[i].prizeName,
            ratio = configs[i].ratio,
            total = configs[i].total;
        res += html.replace( /{{cnIndex}}/g, cnIndex[i] ).replace ( /{{index}}/g, i ).replace( /{{title}}/g, title ).replace( /{{prizeName}}/g, prizeName ).replace( /{{ratio}}/g, ratio ).replace( /{{total}}/g, total );
      }
      oPrizeList.html ( res );
    };
    
    //输入奖项设置时随时改变数组
    $( "#prize-list" ).delegate( "input", "keyup", function() {
      var index = $( "#prize-list .form-group" ).index ( $(this).parents( ".form-group" ).get(0) );
      var name = $(this).attr("data-name");
      var value = $(this).val();
      prizeConfigJSON[index][name] = value;
    });
    
    //输入代理，只允许输入数字
    $("#form-horizontal").delegate(".prize-number", "keyup", function(){
      var r = $(this).val().replace( /\D/g, "" );
      $(this).val( r )
    });
    $("#form-horizontal").delegate(".prize-ratio", "keyup", function(){
      var r = $(this).val().replace( /\D/g, "" );
      $(this).val( r );
    });
    
    //经过图片路径文本框时显示预览图片
    var img = $("<img>");
    $("#pic").on("mouseover", function( e ){
      $(this).parent().css({"position": "relative"});
      $(img).attr( "src", $(this).val() );
      $(img).css( {"position":"absolute", "top":0, "left":"100%", "maxWidth": "200px"} );
      $(img).appendTo( $(this).parent() );
    });
    $("#pic").on("mouseout", function( e ){
      $(img).remove();
    });
    
  });
  
</script>

<!-- uploadify -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script type="text/javascript">
  $("#upload-image").uploadify({
    'multi'            :  true,
    'buttonClass'      :  'margin-bottom',
    'fileSizeLimit'    :   '200kb',
    'buttonText'       :  '上传图片',
    'fileTypeDesc'     :   'Image Files',
    'fileTypeExts'     :   '*.jpg; *.png',
    'swf'              :   '__PUBLIC__/Style/Common/uploadify/uploadify.swf',
    'uploader'         :   '__MODULE__/Upload/uploadOne',
    'onUploadStart'    :  function(){},
    'onUploadSuccess'  : function( data, res ) {
      var url = eval("(" + res + ")").extra.url;
      $("#pic").val( url );  
    }
  });
</script>